<template>
  <button
    :class="triggerClass"
    @click="handleClick"
    :data-state="isActive ? 'active' : 'inactive'"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'TabsTrigger',
  props: {
    value: {
      type: String,
      required: true,
    },
  },
  inject: ['activeTab', 'updateActiveTab'],
  computed: {
    isActive() {
      return this.activeTab === this.value;
    },
    triggerClass() {
      const base = 'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm';
      const inactive = 'hover:bg-muted hover:text-muted-foreground';
      return `${base} ${this.isActive ? '' : inactive}`;
    },
  },
  methods: {
    handleClick() {
      this.updateActiveTab(this.value);
    },
  },
};
</script>

<style scoped>
.bg-background { background-color: #ffffff; }
.text-foreground { color: #020817; /* gray-900 */ }
.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

.bg-muted { background-color: #f1f5f9; /* gray-100 */ }
.text-muted-foreground { color: #64748b; /* gray-500 */ }
</style>
